<template>
    <div class="box">
        <h2>B组件:{{num}}</h2>
        <button @click="handleAdd">新增商品</button>
        <ul>
            <li v-for="(item,index) in filterGlist" :key="index">
                商品名称:{{item.name}} ,
                商品价格:{{item.price}} ,
                商品数量:{{item.n}} ,
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        computed: {
            num() {
                return this.$store.state.count.num 
            },
            filterGlist(){
                return this.$store.getters['goods/filterGlist']
            }
        },
        methods: {
            handleAdd() {
                this.$store.commit('goods/addGoods',{
                    name:'新商品',
                    price:(Math.random()*90+10).toFixed(2),
                    n:1
                })
            }
        },
    }
</script>

<style lang="less" scoped>
.box{
    width: 45%;
    float: left;
    border: 1px solid #333;
    height: 400px;
    h2{
        font-size: 30px;
        font-weight: bold;
    }
}
</style>